<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise初体验</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">promise初体验</h2>
        <button class="btn btn-primary">点击抽奖</button>
    </div>
    
    <script>
        // 生成随机数
        function rand(m,n){
            return Math.ceil(Math.random()*(n-m+1)) + m-1;
        }
        /*点击按钮，1s后显示是否中奖（30%概率中奖）
        若中奖  弹出恭喜
        若未中奖 弹出再接再厉*/
        const btn = document.querySelector('.btn');
        btn.addEventListener('click',function(){
            // setTimeout(()=>{
            //     // 获取1-100的随机数
            //     let n =rand(1,100);
            //     if(n<=30){
            //         alert('恭喜');
            //     }else{
            //         alert('再接再厉');
            //     }
            // },1000);

            /* promise实现*/
            const p = new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    // 获取1-100的随机数
                    let n =rand(1,100);
                    if(n<=30){
                        // alert('恭喜');
                        resolve(n);
                    }else{
                        // alert('再接再厉');
                        reject(n);
                    }
                },1000);
            });
            p.then(
                    (value)=>{
                            alert('恭喜,您的中奖数字为'+value);
                        },
                    (reason)=>{
                            alert('再接再厉,您的号码为'+reason);
                        }
                )
        })
    </script>
</body>
</html>